<script lang="ts" setup>
import { ref } from 'vue';
import { getDataList } from '/@/api/businessResource';
import Category from './Category.vue';
import Resource from './Resource.vue';
import DataTree from './DataTree.vue';

const resourceRef = ref()
const categoryRef = ref()
const dataTreeRef = ref()

const bus_data = ref([])

const handleCategoryChange = async(data:any) => {
  resourceRef.value.changeCategory(data)
  getDataList({
    categoryId: data.id
  }).then((res:any) => {
    bus_data.value = res.data
  })
}
const handleCategoryClear = () => {
  categoryRef.value.clearSelection()
}

const handleResourceChange = async(data:any) => {
  dataTreeRef.value.changeResource(data)
}
const handleResourceClear = () => {
  resourceRef.value.clearSelection()
}
</script>

<template>
  <div class="page-wrapper">
    <Category ref="categoryRef" @current-change="handleCategoryChange" />
    <Resource ref="resourceRef" @clear="handleCategoryClear" @current-change="handleResourceChange" />
    <DataTree ref="dataTreeRef" :data="bus_data" @clear="handleResourceClear" />
  </div>
</template>

<style lang="less" scoped>
.page-wrapper {
  min-height: 100%;
  display: flex;
  padding: 1rem;
}
</style>